<template>
  <div class="image-allowed-button-list">
    <div v-for="(img, index) in imgList"
         :key="img.name"
         class="image-button">
      <div @click="allowed && onClick(img)"
           @keyup.enter="allowed && onClick(img)"
           tabindex="0"
           :id="imageAllowedButtonId + index"
           :class="['image-allowed-button',
           {'image-allowed-button-selected': img.name === selectedButton},
           {'image-allowed-button-disabled-no-selected': img.name !== selectedButton && !allowed || img.name !== selectedButton && disabledImgNames.includes(img.name)},
           {'image-allowed-button-disabled-selected': img.name === selectedButton && disabledImgNames.includes(img.name)}]">
        <img :src="img.src"
             class="img-button"
             :alt="img.title || ''" :title="img.title || ''" draggable="false"/>
      </div>
      <div class="img-title" v-if="showText">
        {{img.title}}
      </div>
    </div>
    <slot></slot>
  </div>
</template>

<script>
let IdCount = 0;
export default {
  methods: {
    onClick(img) {
      if (this.disabledImgNames.includes(img.name)) {
        return
      }
      this.$emit('onClick', img);
    },
  },
  data() {
    IdCount++;
    return {
      imageAllowedButtonId: 'dialogImageAllowedButton' + IdCount,
    }
  },
  props: {
    imgList: Array,
    allowed: {
      type: Boolean,
      default: true
    },
    selectedButton: String,
    disabledImgNames: {
      type: Array,
      default: [],
    },
    showText: {
      type: Boolean,
      default: false
    }
  },
  mounted() {
    //该部分设置插件面板主题色，由于涉及需要引入的内容过多，暂时注释。插件面板目前默认设置为亮色主题
    // for (let i = 0; i < this.imgList.length; i++) {
    //   this.setTabFocusStyle($('#' + this.imageAllowedButtonId + i), );
    // }
  },
  watch: {
    'imgList': {
      handler() {
        this.$nextTick(() => {
          for (let i = 0; i < this.imgList.length; i++) {
            // this.setTabFocusStyle($('#' + this.imageAllowedButtonId + i), TabFocusColorsType.ORDINARY);
          }
        });
      },
      deep: true
    }
  },
};
</script>

<style scoped>
.image-allowed-button-list {
  display: flex;
  margin: 5px 4px;
  flex-wrap: wrap;
}

.image-allowed-button {
  background-color: var(--bg-color8);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 3px;
  opacity: .7;
}

.image-allowed-button:hover,
.image-allowed-button-selected {
  opacity: 1;
  background-color: var(--bg-color23);
  cursor: pointer;
}

.image-allowed-button-disabled-no-selected:hover,
.image-allowed-button-disabled-no-selected {
  opacity: 0.2;
  cursor: not-allowed;
  background-color: unset;
}

.image-allowed-button-disabled-selected:hover,
.image-allowed-button-disabled-selected {
  opacity: 0.2;
  cursor: not-allowed;
}

.img-button {
  width: 24px;
  height: 24px;
}

.image-button {
  margin: 3px 5px;
}
</style>
